import Vue from "vue";
import Vuex from "vuex";

import { DECREMENT } from "./mutations-types";

Vue.use(Vuex);

const store = new Vuex.Store({
  // 全局状态
  state: {
    count: 10,
    name: "小军",
    age: 20,
    likes: [299, 399, 699],
    nums: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  },
  // getters就相当于vuex的计算属性
  // 不改变原数据，对返回值有缓存
  // 接受两个参数，state，getters
  getters: {
    oddNums(state) {
      return state.nums.filter((item) => item % 2);
    },
    // oddNums: (state) => (id) => {
    //   return state.nums.filter((item) => item % 2 === id);
    // },
  },
  // mutations是唯一可以改变仓库数据的地方
  // mutations里面写的是函数, 里面可以接受一个参数是state, 第二个参数就是payload
  mutations: {
    increment(state, payload) {
      // console.log(payload);
      setTimeout(() => {
        state.count += payload.num;
      }, 2000);
    },
    [DECREMENT](state) {
      state.count--;
    },
    cheng(state, payload) {
      state.count *= payload.n;
    },
  },
  // actions里面也是写函数的，actions允许写异步函数，不能直接修改state，而是去提交mutations
  actions: {
    // 这里可以接受一个参数是context
    chengAsync({ commit }, payload) {
      // console.log(context);
      return new Promise((resolve) => {
        setTimeout(() => {
          commit("cheng", payload);
          resolve();
        }, 2000);
      });
    },
  },
  modules: {},
});

export default store;
